<template>
  <div style="height:750px">
    <div style="height:100px">
      <el-table
        :data="
          tableData.filter(
            (data) =>
              !search ||
              data.userName.toLowerCase().includes(search.toLowerCase())
          )
        "
        :row-class-name="tableRowClassName"
        style="width: 100%"
      >
        <el-table-column label="问题标题" prop="title"></el-table-column>

        <el-table-column label="客户名" prop="userName"></el-table-column>
        <el-table-column
          prop="problemDescription"
          label="问题描述"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column label="联系方式" prop="phone"></el-table-column>

        <el-table-column align="right">
          <template slot="header">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-circle-close"
              circle
              @click="handleEdit1(scope.$index, scope.row)"
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="新建工单" :visible.sync="dialogFormVisible">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          style="width:1200px;margin:0 auto"
          label-width="80px"
        >
          <el-form-item label="工单标题：" label-width="100px" prop="title">
            <el-input v-model="form.title" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item label="工单号：" label-width="100px" prop="olderNumber">
            <el-input v-model="form.olderNumber" style="width:300px"></el-input>
          </el-form-item>

          <el-form-item label="客户姓名：" label-width="100px">
            <el-input
              v-model="form.customer"
              :disabled="true"
              style="width:300px"
            ></el-input>
          </el-form-item>

          <el-form-item label="上传图片：" label-width="100px">
            <el-upload
              style="width:500px"
              class="upload-demo"
              name="picture"
              action="http://localhost:8888/upload"
              :headers="myHeaders"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :file-list="fileList"
              list-type="picture"
              :show-file-list="true"
            >
              <el-button size="small" type="primary">上传图片</el-button>
            </el-upload>
          </el-form-item>

          <!-- <el-form-item label="已上传图片" v-if="form.imgUrl!=null">
          <el-card :body-style="{ padding: '0px' }" style="width:500px">
            <img class="image" :src="require('D://ss/'+form.imgUrl)" alt />
          </el-card>
          </el-form-item>-->

          <el-form-item label="问题描述" style="width:600px" prop="detail">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 4 }"
              v-model="form.detail"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机号：" label-width="100px" prop="tel">
            <el-input v-model="form.tel" style="width:300px"></el-input>
          </el-form-item>

          <el-form-item label="客户地址：" label-width="100px" prop="addr">
            <el-input v-model="form.addr" style="width:460px"></el-input>
          </el-form-item>

          <el-form-item label="紧急程度：" label-width="100px">
            <el-radio v-model="form.urgent" label="1">普通</el-radio>
            <el-radio v-model="form.urgent" label="2">紧急</el-radio>
          </el-form-item>

          <el-form-item label="选择工人" prop="worker" label-width="100px">
            <el-select v-model="form.worker" placeholder="请选择工人">
              <el-option
                v-for="(item, index) in workers"
                :label="item.username"
                :key="index"
                :value="item.username"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit()">立即创建</el-button>
            <el-button @click="cancel()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      tableData: [],
      search: "",
      dialogFormVisible: false,
      fileList: [],

      workers: [],
      problemid: "",
      orderId: "",
      myHeaders: {
        Authorization: this.$store.getters.Authorization,
      },
      form: {
        customer: "",
        title: "",
        detail: "",
        tel: "",
        addr: "",
        worker: "",
        urgent: "1",
        olderNumber: "",
        adminName: this.$store.state.user.username,
        state: 0,
        problemId: "",
        imgUrl: "",
      },
      rules: {
        title: [{ required: true, message: "请输入工单标题", trigger: "blur" }],
        olderNumber: [
          { required: true, message: "请输入工单号", trigger: "blur" },
        ],
        detail: [
          { required: true, message: "请输入问题描述", trigger: "blur" },
        ],
        tel: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        worker: [{ required: true, message: "请选择工人", trigger: "blur" }],
        addr: [{ required: true, message: "请输入地址", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.showtable();
  },
  methods: {
    showtable() {
      this.$axios({
        method: "post",
        params: {
          userName: null,
        },
        url: "/older/checkAllproblems",
      })
        .then((res) => {
          this.tableData = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleEdit1(index, row) {
      if (confirm("确定驳回该问题吗")) {
        this.$axios({
          method: "post",
          params: {
            id: row.id,
          },
          url: "/older/deleteProblems",
        })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.showtable();
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    handleEdit(index, row) {
      const projectTime = new Date();
      const Year = projectTime.getFullYear();
      const Month = projectTime.getMonth() + 1;
      const Day = projectTime.getDate();
      var CurrentDate = String(Year);
      if (Month >= 10) {
        CurrentDate += Month;
      } else {
        CurrentDate += "0" + Month;
      }
      if (Day >= 10) {
        CurrentDate += Day;
      } else {
        CurrentDate += "0" + Day;
      }
      this.form.olderNumber = CurrentDate + Math.floor(Math.random() * 10000);
      this.form.customer = row.userName;
      this.form.tel = row.phone;
      this.form.addr = row.addr;
      this.problemid = row.id;
      this.form.problemId = row.id;
      console.log(this.form);
      let params = {
        id: 2,
      };
      this.$axios({
        method: "post",
        params: params,
        url: "/user/findWorkers",
      }).then((res) => {
        this.workers = res.data.result;
      });
      this.dialogFormVisible = true;
    },
    onSubmit() {
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "/addolder",
            data: this.form,
          })
            .then((res) => {
              console.log(res);
              this.orderId = res.data.result;

              if (res.data.code == 200) {
                this.$axios({
                  method: "post",
                  params: {
                    id: this.problemid,
                    orderId: this.orderId,
                  },
                  url: "/older/updateProblemState",
                })
                  .then((res) => {
                    console.log(res);
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                this.$axios({
                  method: "post",
                  data: {
                    orderId: this.orderId,
                    worker: this.form.worker,
                    state: 0,
                  },
                  url: "/AddRecord",
                })
                  .then((res) => {
                    console.log(res);
                  })
                  .catch((err) => {
                    console.log(err);
                  });
                this.$refs.form.resetFields();
                this.dialogFormVisible = false;
                this.showtable();
                this.$message.success("新建工单成功");
                this.$router.push({
                  path: "/showolders",
                });
              }
            })
            .catch((error) => {
              console.log(error);
            });
        }
      });
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    cancel() {
      this.dialogFormVisible = false;
      this.reload();
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess(res) {
      console.log(res);
      this.form.imgUrl = res.fileName;
    },
    handleRemove(file) {
      console.log(file);
      this.$axios({
        method: "post",
        url: "/deleteImg",
        params: {
          path: file.response.fileAddress,
        },
      })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success("图片已从本地删除");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
